.inputGroup{
    background: #fff; 
    display: block;
    margin: 10px 0px;
    position: relative
}
label{
    padding: 120x 300x;
    width: 100%; 
    display: block;
    text-align: center; 
    color: #3c454c; 
    cursor: pointer; 
    position: relative; 
    z-index: 2;
    transition: color .2s ease-in; 
    overflow: hidden;
}
label::before{
    content:""; 
    width:18px; 
    height:10px;
    border-radius: 50%;
    position :absolute;
    background:#5562eb;
    top:50%; 
    left:50%;
    transform: translate(-50%,-50%)scale36(1,1,1);
    transition :all .3s cubic-bezier(.4,0,.2,1);
    opacity:0; 
    z-index:-1;
}
label::after{
    content:"";
    width: 32px; 
    height:32px;
    border: 2px solid  #d1d7dc;
    background-color:#fff;
    background-repeat: no-repeat; 
    background-position: 2px 3px;
    border-radius: 50%; 
    z-index: 2;
    position: absolute;
    right:30px;
    top: 50%;
    transform: translatey(-50%);
    cursor: pointer;
    transition: all .2s ease-in;   
}

input:checked ~label{
    color:□#fff;   
}
input:checked ~ label::before{
    transform: translate(-50%,-50%) scale3d(56,56,1);
    opacity:1;
}
input:checked~label::after{
    background-color:#54e0c7;
    border-color:#53e0c7;
}
input{
    width:32px;
    height:32px; 
    order:1; 
    z-index:2;
    position: absolute;
    right:30px;
    top:50%;
    transform: translateY(-50%);
    cursor:pointer; 
    visibility:hidden;
}
.form{
    padding: 0 16px;
    max-width:550px; 
    margin: 50px auto;
    font-size:18px; 
    font-weight:600; 
    line-height:36px;
}
body{
    background-color:#D1D7DC;
    font-family: 'fira Sans',sans-serif;
}
*,
*::before,
*::after{
    box-sizing: inherit;
}
html{
    box-sizing:border-box;
}